<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
  <button id='fly'>Fly</button>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"

export default {
  name: "MapFly.component",
  components: {Mapbox},
  setup() {

    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;

      // 调整 flyTo的 flyOptions 参数以实现效果。
      document.getElementById('fly').addEventListener('click', function () {

        map.flyTo({
          // These options control the ending camera position: centered at
          // the target, at zoom level 9, and north up.
          center: [106 + (Math.random() - 0.5) * 10, 29 + (Math.random() - 0.5) * 10],
          zoom: 9,
          bearing: 0,

          // These options control the flight curve, making it move
          // slowly and zoom out almost completely before starting
          // to pan.
          speed: 0.5, // make the flying slow
          curve: 1, // change the speed at which it zooms out

          // This can be any easing function: it takes a number between
          // 0 and 1 and returns another number between 0 and 1.
          easing: function (t) {
            return t;
          }
        });
      });
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped lang="scss">
#fly {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  width: 20%;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: #ee8a65;
  cursor: pointer;
}
</style>